<template>
  <div class="hearing-report">
    <crumb />
    <div class="container">
      <div class="box-left">
        <div class="task-name">任务名称：{{reportData.hearingName}}</div>
        <div class="task-speak">
          <div class="sub-head">任务要求:</div>
          {{reportData.hearingRemark}}
        </div>
        <div class="task-num">答题题量：{{reportData.subjectNum}}题</div>
        <div class="task-over-box">
          <div class="head">共有<span>{{finishedSize}}</span>个人完成案例</div><div class="more" @click="moreFunc">更多<i class="el-icon-arrow-right"></i></div>
          <ul class="img-content">
            <li class="item" v-for="(item, index) in finishedList" :key="index">
              <img :src="item.headImgUrl" alt="" v-if="item.headImgUrl"/>
              <img src="@/assets/images/home_tx@2x.png" alt="" v-else/>
              <div class="name">{{item.stuName}}</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="box-right">
        <!-- 训练报告 -->
        <div class="table table-1">
          <div class="table-head">训练报告<i class="el-icon-question cursor" @click="openFunc"></i></div>
          <div class="table-content">
            <div>
              <div class="circle left">{{reportData.maxduration}}S</div>
              <div class="text">时长</div>
            </div>
            <div>
             <div class="circle center">{{reportData.maxscore}}</div>
             <div class="text">得分</div>
            </div>
            <div>
              <div class="circle right">{{reportData.rank}}</div>
              <div class="text">排名</div>
            </div>
          </div>
        </div>
        <!-- 答题情况 -->
        <div class="table table-2">
          <div class="table-head">答题情况</div>
          <div class="table-content">
            <ul class="list">
              <li class="item hook" @click="openAnaly(item.subjectId)" :class="item.rightFlag===1?'hook':'fork'" v-for="(item, index) in reportData.subjectList" :key="index">{{item.sortIndex}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 答题解析 -->
    <el-dialog
      title="听力训练-答案解析"
      :visible.sync="dialogVisible"
      width="30%"
      class="answer-popup"
      v-if="analyInfo">
      <div class="section">
        <div class="sec-title">
        <p>题目：{{analyInfo.subjectMap.subject_content}}</p>
          <img class="icon cursor" v-if="analyInfo.hasCollected" @click="cancelCollectSubject(analyInfo.collectId)" src="@/assets/images/sc_2@2x.png" alt=""/>
          <img class="icon cursor" v-else  @click="collectSubject(analyInfo.subjectMap.subject_id)" src="@/assets/images/sc_1@2x.png" alt=""/>
        </div>
        <div class="sec-content cont1">
          <!-- 选择题 -->
          <div class="xz" v-if="analyInfo.subjectMap.subject_type === '10'">
            <div class="item" v-for="(item, index) in analyInfo.subjectMap.itemList" :key="index">
              <span :class="`chooseBtn cursor ${analyInfo.myAnswer === item.answer_code || analyInfo.rightAnswer === item.answer_code ? (analyInfo.rightAnswer === item.answer_code ? 'activeChooseBtn':'errorChooseBtn') : ''}`">{{item.answer_code}}</span>
              <span class="question-content">
                {{item.resource_subject_item_tent}}
              </span>
            </div>
          </div>
          <!-- 评判题 -->
          <div class="pp" v-if="analyInfo.subjectMap.subject_type === '12'">
            <div class="item" v-for="(item, index) in analyInfo.subjectMap.itemList" :key="index">
              <span :class="`chooseBtn cursor ${analyInfo.myAnswer === item.resource_subject_item_tent || analyInfo.rightAnswer === item.resource_subject_item_tent ? (analyInfo.rightAnswer === item.resource_subject_item_tent ? 'activeChooseBtn':'errorChooseBtn') : ''}`">{{item.resource_subject_item_tent}}</span>
              <span class="question-content">
                {{item.resource_subject_item_tent}}
              </span>
            </div>
          </div>
          <!-- 填空题 -->
          <div class="tk" v-else-if="analyInfo.subjectMap.subject_type === '13'">
            <div class="item" v-for="(item, index) in analyInfo.answerRate" :key="index">
              <span>{{item.answer_code}}</span>{{item.right_answer}}
            </div>
          </div>
        </div>
      </div>
      <!-- 填空 -->
      <div class="section" v-if="analyInfo.subjectMap.subject_type === '13'">
        <template v-for="(item, index) in analyInfo.answerRate">
          <div class="block" :key="index">
            <div class="sec-title">我的答题情况</div>
            <div class="sec-content cont2">
              <div class="tk">
                <div>我的答案: {{item.stu_answer}} </div>
                <div>正确答案: {{item.right_answer}}</div>
                <div>正确率：{{analyInfo.rightRate}}%</div>
              </div>
            </div>
            <div class="sec-title">各选项占比</div>
            <div class="sec-content cont3">
              <div class="tk">
                <div v-for="(j, index) in item.rate_data" :key="index">{{j.item}}: {{j.rate}}% </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <!-- 选择 评判 -->
      <div class="section" v-else-if="analyInfo.subjectMap.subject_type === '10' || analyInfo.subjectMap.subject_type === '12'">
        <div class="sec-title">我的答题情况</div>
        <div class="sec-content cont2">
          <div class="xz">
            <div>我的答案: {{analyInfo.myAnswer}} </div>
            <div>正确答案: {{analyInfo.rightAnswer}}</div>
            <div>正确率：{{analyInfo.rightRate}}%</div>
          </div>
        </div>
        <div class="sec-title">各选项占比</div>
        <div class="sec-content cont3">
          <div class="xz">
            <div class="cell" v-for="(item, index) in analyInfo.answerRate" :key="index">
              <span>{{analyInfo.subjectMap.subject_type === '10' ? item.answer_code:item.resource_subject_item_content_en}}：</span><el-progress :stroke-width="12" :percentage="Math.round(item.answer_rate)" ></el-progress>
            </div>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="sec-title">答案解析</div>
        <div class="sec-content cont4">
          {{analyInfo.subjectMap.subject_answer_anaylse}}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { main, report, answerAnalyse, collectSubject, cancelCollectSubject } from '@/api/student/training/listen'
export default {
  name: 'hearing-report',
  data () {
    return {
      lessonHearingCatalogId: '',
      resourceHearingId: '',
      lessonHearingBatchId: '',
      reportData: '',
      dialogVisible: false,
      finishedSize: 0, // 完成人数
      finishedList: [], // 完成人数列表
      analyInfo: '' // 答题解析
    }
  },
  created () {
    this.lessonHearingCatalogId = this.$route.query.lessonHearingCatalogId
    this.resourceHearingId = this.$route.query.resourceHearingId
    this.lessonHearingBatchId = this.$route.query.lessonHearingBatchId
  },
  mounted () {
    this.main()
    this.report()
  },
  methods: {
    openFunc () {
      this.$alert('训练成绩按最高一次训练结果为准', '训练报告说明',
        { confirmButtonText: '知道了' }
      )
    },
    moreFunc () {
      this.$router.push(
        {
          path: 'hearingdetails',
          query: {
            lessonHearingCatalogId: this.lessonHearingCatalogId,
            resourceHearingId: this.resourceHearingId
          }
        }
      )
    },
    // 答题解析
    async openAnaly (subjectId) {
      let res = await answerAnalyse(
        {
          subjectId: subjectId,
          id: this.lessonHearingBatchId
        }
      )
      if (res.code === '200') {
        this.dialogVisible = true
        this.analyInfo = res.data
        // console.log('===答题解析@', res)
      } else {
        this.$message.error(res.message)
      }
    },
    // 收藏题目
    async collectSubject (subjectId) {
      let res = await collectSubject(
        {
          subjectId: subjectId,
          lessonHearingBatchId: this.lessonHearingBatchId
        }
      )
      if (res.code === '200') {
        this.analyInfo.hasCollected = true
        this.analyInfo.collectId = res.data.collectId
        // console.log('==收藏=@', res)
      } else {
        this.$message.error(res.message)
      }
    },
    // 取消收藏
    async cancelCollectSubject (collectId) {
      let res = await cancelCollectSubject(
        {
          collectId: collectId
        }
      )
      if (res.code === '200') {
        this.analyInfo.hasCollected = false
        this.analyInfo.collectId = ''
        // console.log('==取消收藏=@', res)
      } else {
        this.$message.error(res.message)
      }
    },
    // 听力训练报告
    async report () {
      let res = await report(
        {
          lessonHearingBatchId: this.lessonHearingBatchId
        }
      )
      if (res.code === '200') {
        this.reportData = res.data
        // console.log('=====@', res)
      } else {
        this.$message.error(res.message)
      }
    },
    async main () {
      let res = await main(
        {
          lessonHearingCatalogId: this.lessonHearingCatalogId,
          resourceHearingId: this.resourceHearingId
        }
      )
      if (res.code === '200') {
        this.finishedList = res.data.finishedList
        this.finishedSize = res.data.finishedSize
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.hearing-report {
  .container {
    display: flex;
    justify-content: space-between;
    .box-left {
      width: 590px;
      min-height: 500px;
      background: #fff;
      padding: 20px;
      .task-name {
        font-size: 16px;
        font-weight: bold;
      }
      .task-speak {
        background: #f5f5f5;
        margin-top: 20px;
        padding: 10px;
        border-radius: 10px 10px 0 0;
        font-size: 14px;
        line-height: 1.5;
        .sub-head {
          color: #009cf6;
          font-weight: bold;
          margin-bottom: 5px;
        }
      }
      .task-num {
        background: #f5f5f5;
        color: #ff905a;
        border-radius: 0 0 10px 10px;
        padding: 0 10px 20px 10px;
        font-size: 14px;
      }
      .task-over-box {
        font-size: 14px;
        position: relative;
        margin-top: 20px;
        .head {
          span {
            color: #ff905a;
          }
        }
        .more {
          position: absolute;
          right: 0;
          top: 0;
          cursor: pointer;
          &:hover {
            color: #009cf6;
          }
        }
        .img-content {
          display: flex;
          flex-wrap: wrap;
          padding: 20px 2px;
          .item {
            margin:5px;
            overflow: hidden;
            img {
              width: 50px;
              height: 50px;
              border-radius: 50%;
            }
            .name {
              text-align: center;
              margin-top: 10px;
            }
          }
        }
      }
    }
    .box-right {
      width: 590px;
      background: #fff;
      padding: 30px 0;
      .table {
        width: 500px;
        border-radius: 10px;
        border: 1px solid #efefef;
        margin: 0 auto;
        overflow: hidden;
        box-sizing: content-box;
        .table-head {
          background: #f5f5f5;
          line-height: 50px;
          position: relative;
          padding: 0 20px;
          font-size: 14px;
          i {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 20px;
            cursor: pointer;
          }
        }
        .table-content {
          background: #fff;
        }
      }
      .table-1 {
        .table-content {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 20px 0;
          .circle {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
          }
          .left {
            width: 70px;
            height: 70px;
            border: 5px solid #06c280;
          }
          .center {
            width: 80px;
            height: 80px;
            border: 5px solid #009cf6;
            margin:0 20px;
          }
          .right {
            width: 70px;
            height: 70px;
            border: 5px solid #df6733;
          }
          .text {
            text-align: center;
            margin-top: 20px;
          }
        }
      }
      .table-2 {
        margin-top: 30px;
        .list {
          display: flex;
          flex-wrap: wrap;
          padding: 10px 0;
          .item {
            width: 40px;
            line-height:40px;
            text-align: center;
            border-radius: 50%;
            color: #fff;
            margin: 5px;
            cursor: pointer;
          }
          .hook {
            background: #06c280;
          }
          .fork {
            background: #df1263;
          }
        }
      }
    }
  }
  .answer-popup {
    .sec-title {
      font-size: 14px;
      font-weight: bold;
      position: relative;
      padding-right: 30px;
      .icon {
        position: absolute;
        top: 0;
        right: 0;
      }
    }
    .sec-content {
      margin: 10px 0 20px 0;
      line-height: 1.4;
    }
    .cont1 {
      .xz,.pp{
        .item {
          font-size: 16px;
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          .chooseBtn {
            color: #91959a;
            width: 35px;
            height: 35px;
            background: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 35px;
            border: 1px solid #91959a;
            display: block;
          }
          .activeChooseBtn {
            background-color: #009cf6;
            border: 1px solid #009cf6;
            color: #ffffff;
          }
          .errorChooseBtn {
            background-color: #b2b2b2;
            border: 1px solid #b2b2b2;
            color: #ffffff;
          }
          .question-content {
            margin-left: 10px;
            flex: 1;
            line-height: 1.2;
          }
        }
      }
      .tk {
        .item {
          line-height: 25px;
          border: 1px solid #bbb;
          border-radius: 25px 0 0 25px;
          margin-top: 20px;
          span {
            display:inline-block;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            border: 1px solid #bbb;
            text-align:center;
            margin-right: 15px;
          }
        }
      }
    }
    .cont2 {
      .xz,.tk {
        display: flex;
        justify-content: space-between;
      }
    }
    .cont3 {
      .xz {
        .cell {
          display: flex;
          align-items: center;
          margin: 5px 0;
        }
        .cell > div {
          flex: 1;
        }
      }
      .tk {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
